<template>
  <section style="position: relative">
    <logo-panel :backgroundImg="logo.logoImg" logoName="视频" logoDesc="爱学习爱生活,分享与收获"></logo-panel>
    <div class="grid_2">
      <tag :categoryData="vedioCategory" @tagClick="tagClick"></tag>
    </div>
    <div class="grid_9 newVedio" style="margin-left: 35px;">
      <panel-list :listDatas="newVedioPanel" reverse="false" hLineWidth="720px" vLineHeight="420px" hLineLeft="-30px"
                  hLineTop="-30px" panelTitle="最新视频" @itemclick="subjectClickHandler">
        <div slot-scope="{item}">
          <div class="flex flex-h flex-justify-space-between">
            <div>
              <p class="vedio-item-title">{{item.subjectName}}</p>
              <p class="vedio-item-content">{{item.subjectDesc}}</p>
            </div>
            <div style="padding-top: 10px">
              {{item.subjectType}}
            </div>
          </div>
        </div>
      </panel-list>
      <div v-if="authority" class="uploadVedio">
        <a @click="vedioPost.beginPost = true">上传视频</a>
      </div>
    </div>
    <div class="grid_2" style="height: 1px">

    </div>
    <div class="grid_9 newVedio" style="margin-left: 35px; margin-top: 35px">
      <panel-list :listDatas="newVedioPanel" reverse="true" hLineWidth="720px" vLineHeight="420px" hLineLeft="-30px"
                  hLineTop="-30px" panelTitle="最热视频" @itemclick="subjectClickHandler">
        <div slot-scope="{item}">
          <div class="flex flex-h flex-justify-space-between">
            <div>
              <p class="vedio-item-title">{{item.subjectName}}</p>
              <p class="vedio-item-content">{{item.subjectDesc}}</p>
            </div>
            <div style="padding-top: 10px">
              {{item.subjectType}}
            </div>
          </div>
        </div>
      </panel-list>
    </div>
    <post-vedio-panel :begin-post="vedioPost.beginPost" @close="close"></post-vedio-panel>
  </section>
</template>

<script>
// require styles
import '@/assets/css/vedio-list.css'
import axios from '../../node_modules/axios/dist/axios'
export default {
  data () {
    return {
      logo: {
        logoImg: require('../assets/images/星空.png')
      },
      vedioPost: {
        beginPost: false
      },
      newVedioPanel: {
        imageSrc: require('../../static/images/星空背景长图.png'),
        width: '700',
        datas: []
      },
      vedioCategory: [],
      authority: false
    }
  },
  components: {
    'postVedioPanel': (resolve) => { require(['./PostVedioPanel'], resolve) },
    'LogoPanel': (resolve) => { require(['./common/LogoPanel'], resolve) },
    'panelList': () => import('./common/PanelList'),
    'tag': () => import('./common/Tag')
  },
  mounted () {
    // this.obtainVedioList()
    this.obtainLeftNav()
    this.obtainNew()
  },
  methods: {
    tagClick (item) {
      this.$router.push({path: '/vedioShow', query: {tagName: item.name}})
    },
    goVedioDetail (item) {
      this.$router.push(`/vediodetail/${item.subjectName}`)
    },
    obtainLeftNav () {
      let _this = this
      axios.get('/vedioList/leftNav').then(function (res) {
        _this.vedioCategory = res.data.datas
      })
    },
    obtainNew () {
      var _this = this
      axios
        .get('/vedioList/getVedio', {
          params: {categoryType: '全部', filterType: '最新'}
        })
        .then(function (res) {
          _this.newVedioPanel.datas = res.data.datas
          _this.authority = res.data.authority
        })
    },
    obtainVedioList (categoryType, filterType) {
      var _this = this
      this.leftPanel.currentType = categoryType || this.leftPanel.currentType || '全部'
      this.filterPanel.currentType = filterType || this.filterPanel.currentType || '全部'
      axios
        .get('/vedioList/getVedio', {
          params: {categoryType: this.leftPanel.currentType, filterType: this.filterPanel.currentType}
        })
        .then(function (res) {
          _this.vedioPanel.vedios = res.data.datas
        })
    },
    subjectClickHandler (item) {
      this.$router.push({path: '/vediodetail', query: {subjectName: item.subjectName, subjectType: item.subjectType}})
    },
    close () {
      this.vedioPost.beginPost = false
    }
  }
}
</script>

<style scoped>
  .newVedio {
    min-height: 420px;
    position: relative;
  }
  .uploadVedio {
    position: absolute;
    right: 15px;
    top: 5px;
  }
  .vedio-item-title {
    font-size: 16px;
    margin-top: 10px;
    text-align: left;
    color: darkgrey;
    font-family: "-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif";
  }
  .vedio-item-content {
    font-size: 14px;
    color: darkgrey;
  }
</style>
